<template>
	<view class="page" style="background-color: #FFFFFF;">
		<view style="width: 100%;height: 25vh;"></view>
		<view class="item">
			<view class="item-title">新密码：</view>
			<view class="item-input">
				<input type="text" :value="password" :password="isPassword" @input="inputHandle($event,'password')" maxlength="10">
				<image mode="aspectFit" :src="isPassword ? '../../static/icons/login/unvisible.png' : '../../static/icons/login/visible.png'" @click="changeVisible('isPassword')"></image>
			</view>
		</view>
		<view class="item">
			<view class="item-title">确认新密码：</view>
			<view class="item-input">
				<input type="text" :value="againpassword" :password="isAgainPassword" @input="inputHandle($event,'againpassword')" maxlength="10">
				<image mode="aspectFit" :src="isAgainPassword ? '../../static/icons/login/unvisible.png' : '../../static/icons/login/visible.png'" @click="changeVisible('isAgainPassword')"></image>
			</view>
		</view>
		<view class="submit-button" @click="editPassword">修改密码</view>
	</view>
</template>

<script>
	let _this;
	import SETTING from '../../api/setting.js'
	import { showToast} from '../../lib/utils.js'
	export default {
		data() {
			return {
				password: '',
				againpassword: '',
				isPassword: true,
				isAgainPassword: true
			}
		},
		onLoad() {
			_this = this;
		},
		methods: {
			inputHandle(e, str) {
				_this[str] = e.detail.value;
			},
			changeVisible(str) {
				if (str == 'isPassword') {
					_this.isPassword = _this.isPassword ? false : true;
				}else if (str == 'isAgainPassword') {
					_this.isAgainPassword = _this.isAgainPassword ? false : true;
				}
			},
			editPassword() {
				if(_this.password.trim() == '' || _this.password == '') {
					showToast('密码不能为空')
				}else if((_this.password.trim() !== '' && _this.password !== '') && (_this.againpassword == '' || _this.againpassword.trim() == '')) {
					showToast('请再次输入密码')
				}else if(_this.password !== _this.againpassword) {
					showToast('两次输入的密码不一致!')
				}else if(_this.password.length < 6) {
					showToast('密码长度不小于6')
				}
				uni.showModal({
					title: '确认修改密码吗？',
					success: (res) => {
						if(res.confirm) {
							SETTING.adminEditPassword({
								pwd: _this.password,
								againPassword: _this.againpassword
							}).then((res) => {
								showToast(res.message);
								uni.navigateBack();
							}).catch((err) => {
								showToast(err.message);
							});
						}
					}
				});
			}
		}
	}
</script>

<style>
.item {
	display: flex;
	flex-direction: row;
	position: relative;
	align-items: center;
	height: 100rpx;
	margin: 0 30rpx 4rpx 30rpx;
}
.item-title{
	font-size: 24rpx;
	line-height: 70rpx;
	width: 150rpx;
	text-align: right;
}
.item-input{
	flex: 1;
	height: 60rpx;
	display: flex;
	border-bottom: 2rpx solid #e8e8e8;
	align-items: center;
}
.item-input image{
	height: 40rpx;
	width: 40rpx;
	margin: 0 30rpx;
}
.item-input input {
	display: inline-block;
	flex: 1;
	height: 58rpx;
	line-height: 58rpx;
	font-size: 24rpx;
	padding: 0 15rpx;
}

.submit-button{
	height: 80rpx;
	line-height: 80rpx;
	background-color: #2c6ffe;
	text-align: center;
	color: #FFFFFF;
	margin: 200rpx 30rpx 0 30rpx;
	position: unset;
	border-radius: 16rpx;
}
</style>
